<template>
  <iframe
    v-if="warned && jwt_token"
    :src="'https://view.officeapps.live.com/op/embed.aspx?src=' + srcUrl"
    class="w-4/5 mx-auto h-full"
    frameborder="0"
  >
    This is an embedded Microsoft Office document, powered by Office
    Online>.</iframe>
  <div
    v-else
    class="max-w-[450px] h-fit self-center p-10 bg-surface-white rounded-md text-neutral-100 text-xl text-center font-medium shadow-xl flex flex-col justify-center items-center gap-4"
  >
    <div
      v-if="error"
      class="text-p-base"
    >
      <LucideSettings class="size-8 mb-6 mx-auto" />
      Please ask your site's administrator to set the access key in the
      <a
        href="/app/drive-disk-settings"
        class="underline"
      >Settings</a>.
    </div>
    <template v-else>
      <LucideAlertCircle class="size-10" />
      <span class="text-ink-gray-8">Are you sure you want to preview?</span>
      <span class="text-p-base text-center text-ink-gray-7">
        This preview is generated by an external service (<b>Microsoft</b>), not
        by Drive. For extra privacy, we'd suggest downloading.
      </span>
      <div class="flex flex-col gap-2 w-full">
        <Button
          class="w-full"
          variant="subtle"
          :loading="jwt_token === ''"
          @click="warned = true"
        >
          View anyway
        </Button>
        <Button
          class="w-full"
          variant="solid"
          @click="download"
        >
          Download
        </Button>
      </div>
    </template>
  </div>
</template>
<script setup>
import { computed, ref, watch } from "vue"
const props = defineProps({
  previewEntity: Object,
})

const warned = ref(false)
watch(warned, async () => {
  jwt_token.value = ""
  const res = await fetch(
    "/api/method/drive.api.files.create_auth_token?entity_name=" +
      props.previewEntity.name
  )
  const { message } = JSON.parse(await res.text())
  if (message) {
    jwt_token.value = message
  } else {
    error.value = "Please set up your Drive Settings."
  }
})

const jwt_token = ref(null)
const error = ref(null)
const srcUrl = computed(() =>
  encodeURIComponent(
    new URL(
      `/api/method/drive.api.files.get_file_content?jwt_token=${jwt_token.value}&entity_name=${props.previewEntity.name}&trigger_download=1`,
      window.location.origin
    ).href
  )
)
const download = () => (window.location.ref = srcUrl.value)
</script>
